<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-button size="small" type="primary" @click="autoSendUserGlod">执行发放</el-button>
          <el-button size="small" type="primary" @click="autoRealNameAction">确认佣金到账</el-button>
        </div>

        <el-tabs v-model="tabIndex" @tab-click="getList(1)">
          <el-tab-pane v-for="(item,index) in headeNum" :key="index" :name="item.id.toString()" :label="item.name" />
        </el-tabs>


        <el-upload
          style="display: inline-block;"
          class="upload-demo"
          :headers="myHeaders"
          :action="ptfileUrl"
          :on-success="handleSuccess"
          :show-file-list="true"
          accept=".xlsx,.xls"
          :file-list="fileList"
          :before-upload="beforeAvatarUpload"
          v-if="tabIndex==0"
        >
          <el-button size="small" type="primary">导入平台订单数据</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过2M</div>
        </el-upload>

        <el-upload
          style="display: inline-block;"
          class="upload-demo"
          :headers="myHeaders"
          :action="yjfileUrl"
          :on-success="handleSuccess"
          :show-file-list="true"
          accept=".xlsx,.xls"
          :file-list="fileList"
          :before-upload="beforeAvatarUpload"
          v-else
        >
          <el-button size="small" type="primary">导入业绩管理数据</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过2M</div>
        </el-upload>

        <el-link type="primary" :href="`${roterPre}` + '/static/example.xlsx'" download="靓号导入模板.xlsx">下载模板</el-link>

        <div style="padding:10px 0; margin-top:20px;border-top:1px solid #ddd; border-bottom:1px solid #ddd">
          执行列表
        </div>

        <el-table
          v-loading="listLoading"
          :data="tableData.data"
          style="width: 100%"
          size="mini"
          name="m1"
          :row-key="(row) => { return row.id }"
        >

          <el-table-column prop="id" label="ID" min-width="50" />
          <el-table-column prop="type" label="类型" min-width="120">
            <template slot-scope="scope">
              <span>（{{ scope.row.file_name }}）</span>
            </template>
          </el-table-column>
          <el-table-column prop="page_count" label="已执行总数" />
          <el-table-column prop="success_sum" label="成功执行数量" />
          <el-table-column prop="create_time" label="导入时间" />
          <el-table-column prop="status" label="状态" min-width="120">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status==0" type="warning">等待执行</el-tag>
              <el-tag v-if="scope.row.status==1" type="danger">执行中</el-tag>
              <el-tag v-if="scope.row.status==2" type="success">执行完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="tool" label="操作" min-width="120">
            <template slot-scope="scope">
             <el-link v-if="scope.row.err_msg!='' && scope.row.err_msg!=null" type="warning" @click="lookError(scope.row)">查看错误</el-link>
             <el-link style="margin-left: 15px;" type="success" @click="downLoad(scope.row)">下载文件</el-link>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange" @current-change="pageChange" />
        </div>

      </div>
    </el-card>

    <el-drawer
      title="错误信息"
      :visible.sync="drawer"
    >
      <div style="padding:20px; box-sizing: border-box; height: 100vh; overflow-y: auto;" v-html="direction" />
    </el-drawer>

  </div>
</template>
<script>
import {
  getGoldList
} from '@/api/phone'
import { autoSend } from '@/api/order'
import {
  roterPre
} from '@/settings'
import SettingMer from '@/libs/settingMer'
import { getToken } from '@/utils/auth'
export default {
  name: 'PhoneList',
  components: {},
  data() {
    return {
      ptfileUrl: SettingMer.https + '/store/import/pt_order',
      yjfileUrl: SettingMer.https + '/store/import/yj_order',
      myHeaders: { 'X-Token': getToken() },
      roterPre: roterPre,
      tabIndex: '0',
      headeNum: [
        {
          id: 0,
          name: '平台订单佣金发放'
        },
        {
          id: 1,
          name: '业绩管理佣金发放'
        }
      ],
      fileList: [],

      tableData: [],
      listLoading: false,
      tableFrom: {
        page: 1,
        limit: 20
      },
      drawer: false,
      direction: ''
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 上传成功
    handleSuccess(response) {
      if (response.status === 200) {
        this.$message.success(response.message)
      } else {
        this.$message.error(response.message)
      }
    },
    /**
     * 上传前
     * @param {Object} file
     */
    beforeAvatarUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 8

      if (!isLt10M) {
        this.$message.error('上传文件单个不能超过 8MB!')
        return false
      }
      return true
    },

    // 列表
    getList(num) {
      this.listLoading = true
      this.tableFrom.page = num || this.tableFrom.page
      this.tableData.data = []

      let param=this.tableFrom;
      param['type']=this.tabIndex

      getGoldList(param).then(res => {
          this.tableData.data = res.data.list
          this.tableData.total = res.data.count
          this.listLoading = false
        }).catch(res => {
          this.listLoading = false
          this.$message.error(res.message)
        })
    },

    /**
     * 发放话费佣金
     */
    autoSendUserGlod() {
      if (this.isSendStatus) return true
      this.isSendStatus = true

      this.$confirm('你确定要开始发放吗？').then(res => {
        if (res == 'confirm') {
          autoSend(0).then(res => {
            this.isSendStatus = false
            this.$message.success(res.message)
          })
        }
      }).catch(res => {
        this.isSendStatus = false
      })
    },

    /**
     * 自动实名发放佣金
     */
    autoRealNameAction() {
      if (this.isSendStatus) return true
      this.isSendStatus = true

      this.$confirm('进入发放入账，请确认每个佣金是否正常？').then(res => {
        if (res == 'confirm') {
          autoSend(1).then(res => {
            this.isSendStatus = false
            this.$message.success(res.message)
          })
        }
      }).catch(res => {
        this.isSendStatus = false
      })
    },

    /**
     * 批量删除
     */
    batchOff() {
      if (this.tableFrom.keyword === '' && this.tableFrom.bar_code === '') {
        return this.$message.warning('请输入删除搜索条件')
      }
      this.$confirm('您确定要删除吗').then(res => {
        if (res == 'confirm') {
          storePhoneDelApi(this.tableFrom).then(res => {
            this.$message.success(res.message)
          }).catch(res => {
            this.$message.error(res.message)
          })
        }
      }).catch(res => {})
    },

    /**
     * 重新执行
     * @param {Object} id
     */
    realSet(id, status) {
      let msg = `您确认重新执行吗！`
      if (status == 2) {
        msg = `您确认要终止执行吗！`
      }
      this.$confirm(msg).then(res => {
        if (res == 'confirm') {
          storePhoneReSetApi({
            id,
            status
          }).then(res => {
            this.$message.success(res.message)
          }).catch(res => {
            this.$message.error(res.message)
          })
        }
      }).catch(res => {})
    },

    /**
     * 查看錯誤
     * @param {Object} e
     */
    lookError(e) {
      this.drawer = true
      this.direction = ''
      if (e.err_msg != '' && e.err_msg != null) {
        const arr = e.err_msg.split('|')

        arr.find(res => {
          this.direction += `<p>${res}</p>`
        })
      }
    },

    /**
     * 下载文件
     * @param {Object} e
     */
    downLoad(e) {
      let url = e.url_path.replace('/home/wwwroot/tv.ytuy.cn', 'https://tv.ytuy.cn')
      url = url.replace('public/', '')
      window.location.href = url
    },

    pageChange(page) {
      this.tableFrom.page = page
      this.getList('')
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList('')
    }

  }
}
</script>

<style scoped lang="scss">

</style>
